﻿ 
<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style type="text/css">
     #editor{
        float:left; width:380px;background:#D5F3F4;padding-left:10px;
      }
      #editor span.button{
        display:block;float:left;border: 1px solid  #CCC;margin:1px 5px 1px 0px ;color: #000;
        background: #D0E8FC;width:40px;height:20px;text-align:center;
      }
      #editor select{ display:block; float:left;height:24px;width:60px;margin-right:5px;}
      #textarea {width:382px;height:100px;}
        </style>
        <script type="text/javascript">
            var addEvent = (function () {
                if (document.addEventListener) {
                    return function (el, type, fn) {
                        el.addEventListener(type, fn, false);
                    };
                } else {
                    return function (el, type, fn) {
                        el.attachEvent('on' + type, function () {
                            return fn.call(el, window.event);
                        });
                    }
                }
            })();
            var deliver = function(iframe){
                addEvent(iframe.contentWindow,'blur',function(){
                    var tip = document.getElementById("exe");
                    iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                    tip.innerHTML = "失去焦点，并取得iframe的内容为："+iframeDocument.body.innerHTML
                    tip.style.backgroundColor = "#9999CC";
                })
            }
            window.onload = function(){
                var editor = document.getElementById("editor");
                var buttons = document.getElementById("image");
                var selects = editor.getElementsByTagName("select");
                var textarea = document.getElementById("textarea");
                textarea.style.display = "none";
                var iframe = document.createElement("iframe");
                iframe.style.width = "390px";
                iframe.style.height = "100px";
                iframe.frameBorder=0;
                textarea.parentNode.insertBefore(iframe,textarea);
                var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                iframeDocument.designMode = "on";
                iframeDocument.open();
                iframeDocument.write('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF }</style></head></html>');
                iframeDocument.close();
                var switchEditMode = true;
              
                    buttons.onclick = new function(){
                    
                  
                        var command=buttons.getAttribute("title");
                        return function(){
                            switch(command){
                                
                                case 'insertimage':
                                    var value = prompt('请输入超链接:', 'http://');
                                    iframeDocument.execCommand(command,false,value);
                                    break;
                               
                          if(switchEditMode){//切换到textarea
                                        iframe.style.display = "none";
                                        textarea.style.display = "block";
                                        textarea.value = iframeDocument.body.innerHTML;
                                        textarea.focus();
                                        switchEditMode = false;
                                    }else{//切换到iframe
                                        iframe.style.display = "block";
                                        textarea.style.display = "none";
                                        iframeDocument.body.innerHTML = textarea.value;
                                        iframe.contentWindow.focus();
                                        switchEditMode = true;
                                    }
                                    break;
                                default:
                                    iframeDocument.execCommand(command,false,'');
                                    iframe.contentWindow.focus();
                            }
                        };
                    };
                
               
                deliver(iframe);
            }
        </script>
        <title>富文本编辑器</title>
    </head>
    <body>
        <p id="exe"></p>
        <div id="editor">

            <span class="button" title="insertimage" id="image" unselectable="on">图片</span>
            
        </div>
        <br style="clear:both"/>
        <textarea id="textarea"></textarea>

          <p>编辑完，试一下在iframe内外来回点击！</p>
    </body>
</html>
